<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax请求</title>
    <style>
        #load{
            width: 100%;
            height: 60px;
            background-color: blue;
            float: contour;
        }
    </style>
</head>
<body>
<button id="load">加载</button>
<div id="photos"></div>
<script>
    (() => {
        const photos = document.querySelector('#photos')
        const loadBut = document.querySelector("#load")
        var page = 0
        loadBut.addEventListener('click', (ev => {
            page += 1
            // 创建异步请求对象

            let xhr = new XMLHttpRequest()
            xhr.open('get', 'http://api.tianapi.com/meinv/index?key=962cf8668c6023bfa93da969bea239b7&page=' + page +'&n=20', true);
            xhr.addEventListener('readystatechange', () => {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    // xhr.responseText --> string 类型
                    // 转换为 JavaScript 对象
                    console.log(typeof xhr.responseText);
                    let json = JSON .parse(xhr.responseText);
                    json.newslist.forEach((mm) => {
                        let img = document.createElement('img');
                        img.src = mm.picUrl;
                        img.width = "150px";
                        img.height = "200px";
                        photos.insertBefore(img, photos.firstElementChild);
                    });
                }
            });

            xhr.send();
        }));
    })()
</script>
</body>
</html>